<template>
  <view class="container">
    <!-- 头部标题 -->
    <view class="header">
      <text class="title">提现</text>
    </view>

    <!-- 主要内容区域 -->
    <view class="content">
      <!--选A券选B券的按钮-->
      <view class="button-group">
        <nut-button
          class="btn"
          @tap="handleSelect('A')"
          :type="accountType == 'A' ? 'primary' : 'default'"
          >选A券</nut-button
        >
        <nut-button
          class="btn"
          @tap="handleSelect('B')"
          :type="accountType == 'B' ? 'primary' : 'default'"
          >选B券</nut-button
        >
      </view>

      <!-- 金额输入区域 -->
      <view class="input-section">
        <text class="input-label">提现金额(余额：{{ accountType == 'A' ? business.balanceA : business.balanceB }})</text>
        <view class="input-container">
          <text class="currency">¥</text>
          <input
            v-model="amount"
            type="number"
            class="amount-input"
            placeholder="0.00"
            placeholder-class="placeholder"
            @input="handleAmountInput"
          />
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="button-group">
        <nut-button class="btn cancel-btn" @tap="handleCancel">取消</nut-button>
        <nut-button
          class="btn confirm-btn"
          @tap="handleConfirm"
          type="primary"
          :disabled="!isValidAmount"
        >
          确定
        </nut-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
import { ref, computed } from "vue";
import http from "@/utils/http";
import { store } from "@/store/index";
const amount = ref("");
const accountType = ref("A");
const params = Taro.getCurrentInstance().router?.params;
console.log("params", params);

// 直接解构store中的响应式状态
const { business } = store.storeState;

const handleSelect = (type: string) => {
  accountType.value = type;
};

// 验证金额是否有效
const isValidAmount = computed(() => {
  const num = parseFloat(amount.value);
  return !isNaN(num) && num > 0;
});

// 处理金额输入
const handleAmountInput = (e: any) => {
  const value = e.detail.value;
  // 简单的金额格式校验
  if (/^\d*\.?\d{0,2}$/.test(value) || value === "") {
    amount.value = value;
  }
};

// 取消操作
const handleCancel = () => {
  Taro.showToast({
    title: "已取消",
    icon: "none",
  });
  // 实际项目中可能需要返回上一页或其他操作
  Taro.navigateBack();
};
// 确认核销
const handleConfirm = () => {
  if (!isValidAmount.value) return;
  http
    .postQuery(`/api/merchant/addWithdrawal`, {
      dictyosome: accountType.value,
      amount: amount.value,
    })
    .then((res) => {
      console.log("res code", res);
      if (res.code == 0) {
        Taro.showToast({
          title: `操作成功`,
          icon: "success",
        });
      } else {
        Taro.showToast({
          title: res.data,
          icon: "error",
        });
      }
    });

  //   Taro.showLoading({
  //     title: "处理中...",
  //   });

  //   // 模拟API调用
  //   setTimeout(() => {
  //     Taro.hideLoading();
  //     Taro.showToast({
  //       title: `成功核销 ¥${amount.value}`,
  //       icon: "success",
  //     });
  //     // 实际项目中这里调用核销API
  //   }, 1500);
};
</script>

<style lang="scss">
.container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 40rpx 0;
  background-color: #fff;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

.content {
  flex: 1;
  padding: 60rpx 40rpx;
}

.input-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 60rpx;

  .input-label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 30rpx;
    display: block;
  }

  .input-container {
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #eee;
    padding-bottom: 20rpx;

    .currency {
      font-size: 48rpx;
      font-weight: bold;
      color: #333;
      margin-right: 20rpx;
    }

    .amount-input {
      flex: 1;
      font-size: 48rpx;
      font-weight: bold;
      color: #333;
      height: 80rpx;
      padding: 0;
    }

    .placeholder {
      color: #ccc;
      font-weight: normal;
    }
  }
}

.button-group {
  display: flex;
  gap: 30rpx;

  .btn {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 45rpx;
    font-size: 32rpx;
    border: none;
  }
}
</style>
